<template>
  <div class="progress">
    <div class="demo-inner-divider">线形进度条：progress</div>
    <e-progress
      :percent="100"
      status="success">
    </e-progress>
    <e-progress
      show-status-tips
      :percent="100"
      status="success">
    </e-progress>
    <e-progress
      :percent="80"
      status="wrong">
    </e-progress>
    <e-progress
      show-status-tips
      :percent="80"
      status="wrong">
    </e-progress>
    <e-progress>
    </e-progress>
    <e-progress
      :percent="50">
    </e-progress>
    <div class="demo-inner-divider">线形进度条尺寸</div>
    <e-progress
      type="small"
      status="success"
      :percent="100">
    </e-progress>
    <e-progress
      type="small"
      status="wrong"
      :percent="70">
    </e-progress>
    <e-progress
      type="small">
    </e-progress>
    <e-progress
      type="small"
      :percent="30">
    </e-progress>
    <e-progress
      hide-info
      status="success"
      :percent="100">
    </e-progress>
    <e-progress
      hide-info
      status="wrong"
      :percent="70">
    </e-progress>
    <e-progress hide-info>
    </e-progress>
    <e-progress
      hide-info
      :percent="30">
    </e-progress>
    <!-- 百分比内显示 -->
    <div class="demo-inner-divider">百分比内显</div>
    <e-progress :percent="25" :stroke-width="20" text-inside />
    <e-progress :percent="45" :stroke-width="20" status="active" text-inside />
    <e-progress :percent="65" :stroke-width="20" status="wrong" text-inside />
    <e-progress :percent="100" :stroke-width="20" text-inside />
    <!--  progress组件readme  -->

    <!-- progress垂直方向 -->
    <div class="demo-inner-divider">progress垂直方向</div>
    <div style="height: 250px;">
      <e-progress vertical :percent="25" />
      <e-progress vertical :percent="45" status="active" />
      <e-progress vertical :percent="65" status="wrong" />
      <e-progress vertical :percent="100" />
      <e-progress vertical :percent="25" hide-info />
    </div>

    <!-- progress与其它组件组合使用 -->
    <div class="demo-inner-divider"> progress与其它组件组合使用 </div>
    <e-progress :percent="percent" />
    <e-buttonGroup>
      <e-button icon="add" @click="add"></e-button>
      <e-button icon="remove" @click="minus"></e-button>
    </e-buttonGroup>


    <!-- 自定义样式 -->
    <div class="demo-inner-divider"> 自定义样式 </div>
    <e-progress :percent="25" :stroke-width="5" />
    <e-progress :percent="100">
      <e-icon type="check-circle-filled"></e-icon>
      <span>成功</span>
    </e-progress>

    <!-- 设置渐变色 -->
    <div class="demo-inner-divider"> 设置渐变色 </div>
    <e-progress :percent="80" :stroke-color="['#108ee9', '#87d068']" />

    <!-- 分段设置颜色 -->
    <div class="demo-inner-divider"> 分段设置颜色 </div>
    <e-tooltip content="3 done / 3 in progress / 4 to do" style="width: 100%">
      <e-progress :percent="60" :success-percent="30" />
    </e-tooltip>

    <!-- 环形进度条 -->
    <div class="demo-inner-divider"> 环形进度条 </div>
    <e-circle
      :size="130"
      :percent="68"
      stroke-color="#337DFF">
      <span style="font-size:28px">68%</span>
    </e-circle>
    <e-circle
      :size="130"
      :percent="35"
      stroke-color="#F04134">
      <span style="color:#F04134;font-size:52px">!</span>
    </e-circle>
    <e-circle
      :size="130"
      :percent="100"
      stroke-color="#10C038">
      <e-icon
        type="check"
        size="50"
        style="color:#10C038" />
    </e-circle>

    <progress-md class="markdown-body"></progress-md>

  </div>

</template>

<script setup>
import progressMd from '../../docs/progress.md'
import {ref,unref} from 'vue'

let percent=ref(0);
const add=()=>{
  if(unref(percent)>=100){
    return false
  }
  percent.value+=10;
}

const minus=()=>{
  if(unref(percent)<=0){
    return false
  }
  percent.value-=10
}
</script>

<style scoped>
</style>
